<template>
  <el-dialog
    class="assign-role"
    title="分配角色"
    width="50%"
    :visible="showRole"
    @close="close"
  >
    <!-- 分配角色列表 => 多选 => 重点: el-checkbox 组件的使用！！
    1. seledRoles 存储多选的值(ID)
    2. 选项存储的值由label属性决定
     -->
    <el-checkbox-group v-model="seledRoles">
      <el-checkbox v-for="role in roleList" :key="role.id" :label="role.id">
        {{ role.name }}
      </el-checkbox>
      <!-- <el-checkbox label="2">CEO</el-checkbox> -->
      <!-- <el-checkbox label="3">CFO</el-checkbox> -->
    </el-checkbox-group>

    <template #footer>
      <el-button size="small" @click="close">取消</el-button>
      <el-button type="primary" size="small" @click="assignRole">
        分配角色
      </el-button>
    </template>
  </el-dialog>
</template>

<script>
// 导入获取角色列表的API
import { getRoleList } from '@/api/setting'
// 导入获取用户详细信息的API以获取用户的角色
import { getUserDetailById } from '@/api/user'
// 导入给用户分配角色的API
import { assignRoles } from '@/api/empoyees.js'
export default {
  props: {
    showRole: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      // 角色列表
      roleList: [],
      // 选中角色的ID
      seledRoles: [],
      // 用户ID => 后面会用
      currentUserId: ''
    }
  },
  created () {
    this.getRole()
  },
  methods: {
    // 分配角色
    async assignRole () {
      /**
       * 1. 获取用户ID和选中的角色ID数组
       * 2. 调用分配角色接口传入参数
       * 3. 提示并关闭弹层
       */
      // { id:当前用户id, roleIds:选中的角色id组成的数组 }
      await assignRoles({ id: this.currentUserId, roleIds: this.seledRoles })
      this.$message.success('分配成功！')
      this.close()
    },
    // 获取角色列表
    // params: { page: 页码, pagesize: 每页条数 }
    async getRole () {
      const { rows } = await getRoleList({ page: 1, pagesize: 1000 })
      console.log('角色列表:', rows)
      this.roleList = rows
    },
    // 获取当前点击用户之前分配过的角色数据 => 回填
    async getUserRoles (id) {
      const userRoles = await getUserDetailById(id)
      console.log(userRoles)
      // 存储当前用户ID
      this.currentUserId = id
      // 回填选中 => 短路运算防止返回数据是 null
      this.seledRoles = userRoles.roleIds || []
    },
    // 关闭弹层
    close () {
      // 清空上次选中
      this.seledRoles = []
      this.$emit('update:showRole', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-checkbox {
  margin-bottom: 20px;
}
</style>
